<!doctype html>
<html>
    <head>
        <title>Animation Graph Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" charset="utf-8"></script>
        <style type="text/css">
            * {margin:0; padding:0;}
            body {margin:10px; *zoom:1;}
            body:after {content:""; display:block; clear:both;}
            div.clumn {width:360px; float:left;}
            div.graphBox {margin-bottom:30px;}
            div.graphBox ul {width:340px; height:80px; border:1px solid #e8e8e8; list-style:none; margin-bottom:10px; overflow:hidden;}
            div.graphBox ul li {margin:5px; width:1px; height:10px; position:relative;}
            div.graphBox ul li span {position:absolute; top:-2px; right:-35px; display:none; width:30px; font-size:10px; font-family:tahoma;}
            div.graphBox ul li.g1 {background:#ec008c;}
            div.graphBox ul li.g2 {background:#662d91;}
            div.graphBox ul li.g3 {background:#0d004c;}
            div.graphBox ul li.g4 {background:#f7941d;}
            div.graphBox ul li.g5 {background:#8dc63f;}
            div.graphBox input.link {cursor:pointer;}
            
            div.graphBox2 {margin-bottom:30px;}
            div.graphBox2 ul {width:340px; height:230px; border:1px solid #e8e8e8; list-style:none; margin-bottom:10px; overflow:hidden; position:relative;}
            div.graphBox2 ul li {width:10px; height:1px; position:relative;}
            div.graphBox2 ul li span {position:absolute; top:-15px; left:-9px; display:none; width:30px; font-size:10px; text-align:center; font-family:tahoma;}
            div.graphBox2 ul li.g1 {position:absolute; left:80px; bottom:5px; background:#ec008c;}
            div.graphBox2 ul li.g2 {position:absolute; left:120px; bottom:5px; background:#662d91;}
            div.graphBox2 ul li.g3 {position:absolute; left:160px; bottom:5px; background:#0d004c;}
            div.graphBox2 ul li.g4 {position:absolute; left:200px; bottom:5px; background:#f7941d;}
            div.graphBox2 ul li.g5 {position:absolute; left:240px; bottom:5px; background:#8dc63f;}
            div.graphBox2 input.link {cursor:pointer;}
            
            div.graphBox3 {margin-bottom:30px;}
            div.graphBox3 ul {width:340px; height:80px; border:1px solid #e8e8e8; list-style:none; margin-bottom:10px; overflow:hidden;}
            div.graphBox3 ul li {margin:5px; width:1px; height:10px; position:relative;}
            div.graphBox3 ul li span {position:absolute; top:-2px; right:-35px; display:none; width:30px; font-size:10px; font-family:tahoma;}
            div.graphBox3 ul li.g1 {background:#ec008c;}
            div.graphBox3 ul li.g2 {background:#662d91;}
            div.graphBox3 ul li.g3 {background:#0d004c;}
            div.graphBox3 ul li.g4 {background:#f7941d;}
            div.graphBox3 ul li.g5 {background:#8dc63f;}
            div.graphBox3 input.link {cursor:pointer;}
            
            div.graphBox4 {margin-bottom:30px;}
            div.graphBox4 ul {width:340px; height:230px; border:1px solid #e8e8e8; list-style:none; margin-bottom:10px; overflow:hidden; position:relative;}
            div.graphBox4 ul li {width:10px; height:1px; position:relative;}
            div.graphBox4 ul li span {position:absolute; top:-15px; left:-9px; display:none; width:30px; font-size:10px; text-align:center; font-family:tahoma;}
            div.graphBox4 ul li.g1 {position:absolute; left:80px; bottom:5px; background:#ec008c;}
            div.graphBox4 ul li.g2 {position:absolute; left:120px; bottom:5px; background:#662d91;}
            div.graphBox4 ul li.g3 {position:absolute; left:160px; bottom:5px; background:#0d004c;}
            div.graphBox4 ul li.g4 {position:absolute; left:200px; bottom:5px; background:#f7941d;}
            div.graphBox4 ul li.g5 {position:absolute; left:240px; bottom:5px; background:#8dc63f;}
            div.graphBox4 input.link {cursor:pointer;}
        </style>
        <script type="text/javascript">
            // 2010.12.21 sunsang.yoon (ssaeju@naver.com)
            $(document).ready(function(){
                $("#graphBtn").click(function(){
                    //$("div.graphBox ul").animate({height:"80px"}, 100);
                    $(".graphBox li span").text('0');
                    $(".graphBox .g1, .graphBox .g2, .graphBox .g3, .graphBox .g4, .graphBox .g5").animate({width:"1px"}, 50);
                    $(".graphBox .g1").animate({width:(max1*3)+"px"}, 250);
                    $(".graphBox .g2").animate({width:(max2*3)+"px"}, 200);
                    $(".graphBox .g3").animate({width:(max3*3)+"px"}, 150);
                    $(".graphBox .g4").animate({width:(max4*3)+"px"}, 100);
                    $(".graphBox .g5").animate({width:(max5*3)+"px"}, 50);
                    $(".graphBox li span").fadeIn(500);
                    var opacity = 1;
                    $(".graphBox li").css("opacity", opacity);
                    $(".graphBox li").hover(function(){
                        $(this).css("opacity", 0.5);
                    }, function(){
                        $(this).css("opacity", opacity);
                    });
                    incCounter();
                });
                $("#graphBtn2").click(function(){
                    //$("div.graphBox ul").animate({height:"0px"}, 100);
                    $(".graphBox .g1").animate({width:"1px"}, 250);
                    $(".graphBox .g2").animate({width:"1px"}, 200);
                    $(".graphBox .g3").animate({width:"1px"}, 150);
                    $(".graphBox .g4").animate({width:"1px"}, 100);
                    $(".graphBox .g5").animate({width:"1px"}, 50);
                    $(".graphBox li span").fadeOut(500);
                    //$(".graphBox li span").text('0');
                });
                
                ///////////////////////////////////////////////////////////////////////
                
                $("#graphBtn3").click(function(){
                    //$("div.graphBox ul").animate({height:"80px"}, 100);
                    $(".graphBox2 li span").text('0');
                    $(".graphBox2 .g1").animate({height:(max1*2)+"px"}, 250);
                    $(".graphBox2 .g2").animate({height:(max2*2)+"px"}, 200);
                    $(".graphBox2 .g3").animate({height:(max3*2)+"px"}, 150);
                    $(".graphBox2 .g4").animate({height:(max4*2)+"px"}, 100);
                    $(".graphBox2 .g5").animate({height:(max5*2)+"px"}, 50);
                    $(".graphBox2 li span").fadeIn(500);
                    var opacity = 1;
                    $(".graphBox2 li").css("opacity", opacity);
                    $(".graphBox2 li").hover(function(){
                        $(this).css("opacity", 0.5);
                    }, function(){
                        $(this).css("opacity", opacity);
                    });
                    incCounter2();
                });
                $("#graphBtn4").click(function(){
                    //$("div.graphBox ul").animate({height:"0px"}, 100);
                    $(".graphBox2 .g1").animate({height:"1px"}, 250);
                    $(".graphBox2 .g2").animate({height:"1px"}, 200);
                    $(".graphBox2 .g3").animate({height:"1px"}, 150);
                    $(".graphBox2 .g4").animate({height:"1px"}, 100);
                    $(".graphBox2 .g5").animate({height:"1px"}, 50);
                    $(".graphBox2 li span").fadeOut(500);
                    //$(".graphBox2 li span").text('0');
                });
                
                ///////////////////////////////////////////////////////////////////////
                
                $("#graphBtn5").click(function(){
                    //$("div.graphBox ul").animate({height:"80px"}, 100);
                    $(".graphBox3 .g1").animate({width:(max1*3)+"px"}, 250);
                    $(".graphBox3 .g2").animate({width:(max2*3)+"px"}, 200);
                    $(".graphBox3 .g3").animate({width:(max3*3)+"px"}, 150);
                    $(".graphBox3 .g4").animate({width:(max4*3)+"px"}, 100);
                    $(".graphBox3 .g5").animate({width:(max5*3)+"px"}, 50);
                    $(".graphBox3 li span").fadeIn(500);
                    var opacity = 1;
                    $(".graphBox3 li").css("opacity", opacity);
                    $(".graphBox3 li").hover(function(){
                        $(this).css("opacity", 0.5);
                    }, function(){
                        $(this).css("opacity", opacity);
                    });
                    incCounter();
                });
                $("#graphBtn6").click(function(){
                    //$("div.graphBox ul").animate({height:"0px"}, 100);
                    $(".graphBox3 .g1").animate({width:"1px"}, 250);
                    $(".graphBox3 .g2").animate({width:"1px"}, 200);
                    $(".graphBox3 .g3").animate({width:"1px"}, 150);
                    $(".graphBox3 .g4").animate({width:"1px"}, 100);
                    $(".graphBox3 .g5").animate({width:"1px"}, 50);
                    $(".graphBox3 li span").fadeOut(500);
                });
                
                ///////////////////////////////////////////////////////////////////////
                
                $("#graphBtn7").click(function(){
                    //$("div.graphBox ul").animate({height:"80px"}, 100);
                    $(".graphBox4 .g1").animate({height:(max1*2)+"px"}, 250);
                    $(".graphBox4 .g2").animate({height:(max2*2)+"px"}, 200);
                    $(".graphBox4 .g3").animate({height:(max3*2)+"px"}, 150);
                    $(".graphBox4 .g4").animate({height:(max4*2)+"px"}, 100);
                    $(".graphBox4 .g5").animate({height:(max5*2)+"px"}, 50);
                    $(".graphBox4 li span").fadeIn(500);
                    var opacity = 1;
                    $(".graphBox4 li").css("opacity", opacity);
                    $(".graphBox4 li").hover(function(){
                        $(this).css("opacity", 0.5);
                    }, function(){
                        $(this).css("opacity", opacity);
                    });
                    incCounter2();
                });
                $("#graphBtn8").click(function(){
                    //$("div.graphBox ul").animate({height:"0px"}, 100);
                    $(".graphBox4 .g1").animate({height:"1px"}, 250);
                    $(".graphBox4 .g2").animate({height:"1px"}, 200);
                    $(".graphBox4 .g3").animate({height:"1px"}, 150);
                    $(".graphBox4 .g4").animate({height:"1px"}, 100);
                    $(".graphBox4 .g5").animate({height:"1px"}, 50);
                    $(".graphBox4 li span").fadeOut(500);
                });
            });
            
            // 숫자 카운터(%값)
            var max1 = 100;
            var max2 = 20;
            var max3 = 30;
            var max4 = 15;
            var max5 = 20;
                        
            function incCounter(){
                var currCount1 = parseInt($('.graphBox .counter1').html());
                var currCount2 = parseInt($('.graphBox .counter2').html());
                var currCount3 = parseInt($('.graphBox .counter3').html());
                var currCount4 = parseInt($('.graphBox .counter4').html());
                var currCount5 = parseInt($('.graphBox .counter5').html());
                if (currCount1 != max1){
                    $('.graphBox .counter1').text(currCount1+1+"%");
                    setTimeout('incCounter()',0);
                } else if (currCount2 != max2){
                    $('.graphBox .counter2').text(currCount2+1+"%");
                    setTimeout('incCounter()',0);
                } else if (currCount3 != max3){
                    $('.graphBox .counter3').text(currCount3+1+"%");
                    setTimeout('incCounter()',0);
                } else if (currCount4 != max4){
                    $('.graphBox .counter4').text(currCount4+1+"%");
                    setTimeout('incCounter()',0);
                } else if (currCount5 != max5){
                    $('.graphBox .counter5').text(currCount5+1+"%");
                    setTimeout('incCounter()',0);
                }
            }

            function incCounter2(){
                var currCount1 = parseInt($('.graphBox2 .counter1').html());
                var currCount2 = parseInt($('.graphBox2 .counter2').html());
                var currCount3 = parseInt($('.graphBox2 .counter3').html());
                var currCount4 = parseInt($('.graphBox2 .counter4').html());
                var currCount5 = parseInt($('.graphBox2 .counter5').html());
                if (currCount1 != max1){
                    $('.graphBox2 .counter1').text(currCount1+1+"%");
                    setTimeout('incCounter2()',0);
                } else if (currCount2 != max2){
                    $('.graphBox2 .counter2').text(currCount2+1+"%");
                    setTimeout('incCounter2()',0);
                } else if (currCount3 != max3){
                    $('.graphBox2 .counter3').text(currCount3+1+"%");
                    setTimeout('incCounter2()',0);
                } else if (currCount4 != max4){
                    $('.graphBox2 .counter4').text(currCount4+1+"%");
                    setTimeout('incCounter2()',0);
                } else if (currCount5 != max5){
                    $('.graphBox2 .counter5').text(currCount5+1+"%");
                    setTimeout('incCounter2()',0);
                }
            }
        </script>
    </head>
    <body>
        <div class="clumn">
            <div class="graphBox">
                <ul>
                    <li class="g1"><span class="counter1">0</span></li>
                    <li class="g2"><span class="counter2">0</span></li>
                    <li class="g3"><span class="counter3">0</span></li>
                    <li class="g4"><span class="counter4">0</span></li>
                    <li class="g5"><span class="counter5">0</span></li>
                </ul>
                <input type="button" id="graphBtn" value="그래프 보기"/>
                <input type="button" id="graphBtn2" value="그래프 감추기"/>
            </div>
            <div class="graphBox2">
                <ul>
                    <li class="g1"><span class="counter1">0</span></li>
                    <li class="g2"><span class="counter2">0</span></li>
                    <li class="g3"><span class="counter3">0</span></li>
                    <li class="g4"><span class="counter4">0</span></li>
                    <li class="g5"><span class="counter5">0</span></li>
                </ul>
                <input type="button" id="graphBtn3" value="그래프 보기"/>
                <input type="button" id="graphBtn4" value="그래프 감추기"/>
            </div>
        </div>
        <div class="clumn">
            <div class="graphBox3">
                <ul>
                    <li class="g1"><span>100%</span></li>
                    <li class="g2"><span>20%</span></li>
                    <li class="g3"><span>30%</span></li>
                    <li class="g4"><span>15%</span></li>
                    <li class="g5"><span>20%</span></li>
                </ul>
                <input type="button" id="graphBtn5" value="그래프 보기"/>
                <input type="button" id="graphBtn6" value="그래프 감추기"/>
            </div>
            <div class="graphBox4">
                <ul>
                    <li class="g1"><span>100%</span></li>
                    <li class="g2"><span>20%</span></li>
                    <li class="g3"><span>30%</span></li>
                    <li class="g4"><span>15%</span></li>
                    <li class="g5"><span>20%</span></li>
                </ul>
                <input type="button" id="graphBtn7" value="그래프 보기"/>
                <input type="button" id="graphBtn8" value="그래프 감추기"/>
            </div>
        </div>
    </body>
</html>


